<template>
	<view class="">
		<view class="table">
			<view class="fixedBox" v-if="fixedField.length">
				<view class="arrField">
					<view class="item" v-for="(item,index) in fixedField" :key="index" :style="'width:'+itemWidth">
						<text :style="'color:'+item.fieldColor">{{item.lable}}</text>
					</view>
				</view>
				<view class="rowItme" v-for="(item,index) in tableArr" :key="index" >
					<view v-for="(item2,index2) in fixedField" :key="index2" class="val" :style="'width:'+itemWidth">
						<view v-if="item2.val=='option'" style="color: #217df1;" @click="handleRow(item)">
							{{item[item2.val] || '-'}}	
						</view>
						<view v-else class="">
							{{item[item2.val || '-']}}
						</view>
						
					</view>
				</view>
			</view>
			<view class="scrollBox" scroll-x="true" v-if="arrField.length">
					<view class="arrField">
						<view class="item"  v-for="(item,index) in arrField" :key="index"  :style="'width:'+itemWidth">
							{{item.lable || '-'}}
						</view>
					</view>
					<view class="rowItme" v-for="(item,index) in tableArr" :key="index" >
						<view v-for="(item2,index2) in arrField" :key="index2" class="val" :style="'width:'+itemWidth">{{item[item2.val] || '-'}}</view>
					</view>
			</view>
		</view>
		
		<view class="tips" style="padding-bottom: 30rpx;">
			已全部加载完成！
		</view>
		
		
	</view>
</template>
<!-- 
 -->
<script>
	export default {
		components: {
			
		},
		props: {
			fixedField: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			arrField: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			tableArr: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			itemWidth: {
				type: String,
				default: ()=>{
					return '160rpx'
				}
			},
		},
		data() {
			return {
				keyword : ''
			}
		},
		methods: {
			handleRow(e){
				this.$emit('handleRowEmit',e)
			}
					
		},
		
		onLoad({}) {
		},
		onShow() {
		},
		created() {
		},
		mounted() {
		},
		filters: {
		
		},
		
	}
</script>

<style lang="scss" scoped>
// .page{
	.table{
		width: 100vw;
		display: flex;
		background-color: #fff;
		box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
		.fixedBox{
			// max-width: 320rpx;
			display: flex;
			flex-direction: column;
		}
		
		.rowItme{
			width: max-content;
			@include flexCenter;
			border-top: 2rpx solid #F6F6F6;
			height: 120rpx;
			.val{
				height: 100%;
				width: 160rpx;
				@include flexCenter;
				word-break: break-all;
				padding: 15rpx;
			}
		}
		.arrField{
			display: flex;
			height: 83rpx;
			width: max-content;
			// padding-top: 40rpx;
			.item{
				display: flex;
				width: 160rpx;
				height: 80rpx;
				padding: 0 10rpx;
				justify-content: center;
				align-items: center;
				font-weight: 600;
			}
		}
		.scrollBox{
			width: max-content;
			background-color: #FFFFFF;
			color: #333;
			overflow-x: scroll;
		}
			
	}

	.tips{
			text-align: center;
			color: #999999;
			margin-top: 55rpx;
	}
// }


</style>
